<template>
  <div class="patrolPoint">
    <editForm
      :formConfig="basicConfig"
      ref="basicForm"
      :formData="formData"
    ></editForm>
    <dividerTitle title="签到信息"></dividerTitle>
    <editForm
      :formConfig="signConfig"
      ref="basicForm"
      :formData="formData"
    ></editForm>
    <dividerTitle title="巡视环境" v-if="showPatrolEvn"></dividerTitle>
    <editForm
      v-if="showPatrolEvn"
      :formConfig="evnConfig"
      ref="basicForm"
      :formData="formData"
    ></editForm>
    <dividerTitle title="巡视设备"></dividerTitle>
    <base-table
      style="height: calc(100% - 240px)"
      :tableSetting="equipmentConfig"
    ></base-table>
    <dividerTitle :title="'巡视照片(' + fileCount + ')'"></dividerTitle>
    <div class="media">
      <div class="load" v-for="img in images" :key="img.id">
        <el-image
          :src="img.path"
          class="patrolImg"
          fit="cover"
          :preview-src-list="images.map((obj) => obj.path)"
        ></el-image>
      </div>
      <div class="load" v-for="(vid, i) in videos" :key="i">
        <video
          class="patrolVideo"
          autoPlay
          muted
          loop
          @click="playVideo(vid.path)"
        >
          <source :src="vid.path" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="playMask" v-if="playUrl" @click.self="playUrl = ''">
      <i class="el-icon-close close" @click.self="playUrl = ''"></i>
      <video
        class="playVideo"
        controls
        autoPlay
        webkit-playsinline="true"
        playsinline="true"
        x5-video-player-type="h5"
        x5-video-player-fullscreen="portraint"
      >
        <source :src="playUrl" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script>
import { getPatrolCPointDetail } from "@/api/orderManagement/patrolOrder.js";
import { getAttachList } from "@/api/common";
export default {
  props: ["pointId"],
  data() {
    return {
      showMore: false,
      showPatrolEvn: false,
      basicConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "巡视点名称",
            prop: "name",
            type: "text",
            disabled: true,
            span: 12,
          },
          {
            label: "巡视状态",
            prop: "status",
            type: "select",
            disabled: true,
            span: 12,
            selectOption: this.$store.getters.dirtData("order_patrol_status"),
          },
          {
            label: "实际巡视人",
            prop: "workerName",
            type: "text",
            disabled: true,
            span: 12,
          },
          {
            label: "巡视时间",
            prop: "workTime",
            type: "text",
            disabled: true,
            span: 12,
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            disabled: true,
            rows: 3,
            span: 24,
          },
        ],
      },
      signConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "签到状态",
            prop: "arriveStatus",
            type: "select",
            disabled: true,
            span: 12,
            selectOption: [
              { label: "已签到", value: 1 },
              { label: "未签到", value: 0 },
            ],
          },
          {
            label: "签到时间",
            prop: "arriveTime",
            type: "text",
            disabled: true,
            span: 12,
          },
          {
            label: "签到方式",
            prop: "arriveWay",
            type: "select",
            disabled: true,
            span: 12,
            selectOption: this.$store.getters.dirtData("arrive_way"),
          },
          {
            label: "签到备注",
            prop: "arriveRemarks",
            type: "textarea",
            disabled: true,
            rows: 3,
            span: 24,
          },
        ],
      },
      evnConfig: {
        labelWidth: "120px",
        itemArr: [
          {
            label: "确认结果",
            prop: "envStatus",
            type: "select",
            disabled: true,
            span: 12,
            selectOption: this.$store.getters.dirtData("order_patrol_result"),
          },
          {
            label: "检查项",
            prop: "checkItem",
            type: "textarea",
            disabled: true,
            rows: 3,
            span: 24,
          },
          {
            label: "备注",
            prop: "envRemarks",
            type: "textarea",
            disabled: true,
            rows: 3,
            span: 24,
          },
        ],
      },
      formData: {},
      equipmentConfig: {
        indexShow: false,
        highlightRow: false,
        column: [
          {
            label: "序号",
            width: 55,
            prop: "number",
          },
          {
            label: "设备名称",
            prop: "equipName",
          },
          {
            label: "检查项",
            textAlign: "center",
            subColumn: [
              {
                label: "检查项名称",
                prop: "checkName",
              },
              {
                width: 300,
                label: "检查标准",
                prop: "checkStandard",
              },
              {
                label: "数据记录项",
                scopeType: "formate",
                prop: "paramsItem",
                method: (row) => {
                  if (row.paramsItem.leng) {
                  }
                  let dom = "";
                  row.paramsItem.forEach((item) => {
                    let value = `${item.name}: ${item.value}${item.unit}`;
                    dom += "<span>" + value + "</span><br/>";
                  });
                  return dom;
                },
              },
            ],
          },
          {
            width: 100,
            label: "运行状态",
            prop: "runStatus",
            formatter: (row) => {
              if (row.runStatus||row.runStatus==0) {
                return row.runStatus == 1 ? "运行中" : "未运行";
              } else {
                return "-";
              }
            },
          },
          {
            width: 100,
            label: "确认结果",
            prop: "result",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "order_patrol_result",
                row.result
              );
            },
          },
          {
            label: "备注",
            prop: "remark",
          },
        ],
        data: [],
        noBorderRight: false,
        autoHeight: true,
        spanMethod: ({ row, column, rowIndex, columnIndex }) => {
          if ([0, 1, 4, 5, 6, 7].includes(columnIndex)) {
            return {
              rowspan: this.rowSpanArr[rowIndex],
              colspan: 1,
            };
          }
          // if (columnIndex==0) {

          // }
        },
        //height: 400,
      },
      rowSpanArr: [],
      position: 0,
      fileCount: 0,
      images: [],
      videos: [],
      playDialog: false,
      playUrl: "",
      //文件分类
      typeObj: {
        imge: ["jpg", "jpeg", "gif", "bmp", "png"],
        video: ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"],
      },
    };
  },
  watch: {
    pointId: {
      handler(val) {
        this.getPointDetail(val);
      },
    },
  },
  methods: {
    //展示更多
    doShowMore() {
      this.showMore = true;
    },
    //获取巡视点详情
    getPointDetail(id) {
      getPatrolCPointDetail({ patrolPointId: id }).then((res) => {
        this.formData = res.data;
        this.formData.checkItem = res.data.envCheckVos
          .map((item) => {
            return item.name;
          })
          .join(", ");
        this.handleEquipments(res.data.equipmentVos);
        this.showPatrolEvn =
          this.formData.patrolPointType != "equipment" ? true : false;
        this.images = [];
        this.videos = [];
        this.getMediaFile(id);
      });
    },
    //获取附件
    async getMediaFile(businessId) {
      const res = await getAttachList({ businessId });
      const database = localStorage.getItem("currDs") || "";
      this.fileCount = res.data.length;
      res.data.forEach(async (file) => {
        let type = "";
        //循环遍历typeObj,判断是什么类型
        for (const key in this.typeObj) {
          let arr = this.typeObj[key];
          arr.includes(file.extension) && (type = key);
        }
        if ("imge" == type) {
          const base64 = await this.$utils.echoImg(file.id, null, database);
          this.images.push({ path: base64 });
        }
        if ("video" == type) {
          const src = await this.$utils.echoVideo(file.id, null, database);
          this.videos.push({ path: src });
        }
      });
    },

    //处理设备信息
    handleEquipments(data) {
      let equipments = [];
      data.forEach((item, i) => {
        if (item.status || item.status == 0) {
          if (
            item.equipmentItemPos.find((pos) => pos.runState == item.status)
          ) {
            item.equipmentItemPos.forEach((child) => {
              if (child.runState == item.status) {
                let obj = {
                  number: i + 1,
                  equipName: item.name,
                  checkName: child.checkName,
                  checkStandard: child.standardName,
                  paramsItem: item.equipmentParamsPos,
                  runStatus: item.status,
                  result: item.result,
                  remark: item.remarks,
                };
                equipments.push(obj);
              }
            });
          } else {
            let obj = {
              number: i + 1,
              equipName: item.name,
              checkName: null,
              checkStandard: null,
              paramsItem: item.equipmentParamsPos,
              runStatus: item.status,
              result: item.result,
              remark: item.remarks,
            };
            equipments.push(obj);
          }
        } else {
          let obj = {
            number: i + 1,
            equipName: item.name,
            checkName: "",
            checkStandard: "",
            paramsItem: item.equipmentParamsPos,
            runStatus: item.status,
            result: item.result,
            remark: item.remarks,
          };
          equipments.push(obj);
        }
      });
      this.equipmentConfig.data = equipments;
      this.getCheckRowSpan();
    },
    //检查项的合并规则
    getCheckRowSpan() {
      this.rowSpanArr = [];
      this.equipmentConfig.data.forEach((item, index) => {
        if (index == 0) {
          this.rowSpanArr.push(1);
          this.position = 0;
        } else {
          if (
            item.equipName == this.equipmentConfig.data[index - 1].equipName
          ) {
            this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中
            this.rowSpanArr.push(0);
          } else {
            this.rowSpanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    //视频播放
    playVideo(path) {
      this.playDialog = true;
      this.playUrl = path;
    },
  },
};
</script>

<style lang="less" scoped>
.patrolPoint {
  width: 100%;
  padding: 20px 0 50px 30px;
  //border-left: 2px solid #f0f0f0;
}

.media {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  .load {
    height: 80px;
    width: 80px;
    margin: 10px 10px 0 0;
    border-radius: 16px;
    overflow: hidden;
    background-color: #efefef;
    transition: all 0.3s;
    &:hover {
      transform: translateY(-5px);
    }
  }
  .patrolImg,
  .patrolVideo {
    height: 100%;
    width: 100%;
  }

  .patrolVideo {
    cursor: pointer;
  }
}

.playMask {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;

  .close {
    position: absolute;
    top: 50px;
    right: 50px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 8px;
    z-index: 99999;

    &:hover {
      transform: scale(1.2);
    }
  }

  .playVideo {
    height: 100%;
    width: auto;
  }
}
</style>